<script setup>

import Header from '@/components/header/Header.vue'
import SearchInput from "@/views/search/components/SearchInput.vue"
import History from './components/history.vue'
import Hot from './components/Hot.vue'
import {onBeforeRouteLeave, useRouter} from "vue-router"
import {determineNeedSaveKeepALive} from "@/utils/routerKeepALive.js";

const router = useRouter()
defineOptions({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Search',
})

onBeforeRouteLeave((to, from) => {
  const needSaveRoute = ['scenicDetail', 'hotelDetail', 'hotpotDetail']
  determineNeedSaveKeepALive(to, from, needSaveRoute, 'Search')
})

const search = (searchKey) => {
  router.push(`/search/${searchKey}`)
}

</script>

<template>
  <div>
    <Header title="搜索" :back="true" path="/" />
    <div class="content">
      <div>
        <SearchInput @search="search" />
      </div>
      <History @search="search"/>
      <Hot @search="search"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.content{
  height: calc(100vh - 4.6rem);
  overflow-y: auto;
}
</style>